<template>
	<view class="roadCheck">
		<!-- 扫码页 -->
		<view class="topTab">
			<view @click="tab_click(0)" :class="tab_active==0?'tab_item tab_item_active':'tab_item'">二维码扫描</view>
			<view @click="tab_click(1)" :class="tab_active==1?'tab_item tab_item_active':'tab_item'">车牌照识别</view>
		</view>

		<!-- class="road_cont" -->
		<view :class="tab_active==1?'road_cont1':'road_cont'">
			<template v-if="tab_active==0">
				<view class="img_evm">
					<view class="boximg" @click="info_click">
						<image style="width: 290rpx;height: 145rpx;margin: auto;" src="/static/img/ljlc/yd_evm.png"
							mode=""></image>
						<view style="color: #fff;text-align: center;margin-top: 15px">
							点击扫描二维码
						</view>
					</view>

				</view>
				<!-- 	<u--image @click="info_click" src="/static/img/road01.png" width="312rpx" height="312rpx">
				</u--image>
				<view class="cont_tl">
					点击扫描二维码
				</view> -->
			</template>
			<template v-if="tab_active==1">
				<view class="img_evma" style="padding: 0;margin-top: 15px;">
					<view class="search">
						<view class="text_labelz">
							<text>请输入车牌号</text>
						</view>
						<Plate :plateNumber="plateNumber" @myPlateChange="plateChange" />

						<view class="inputView">
							<view class="text_label">
								<text>车牌颜色</text>
							</view>
							<view style="background-color: #fff; position: relative;" class="iptview"
								@click="inputColorClick">
								<u-input style="background-color: #fff;padding-left: 50px;box-sizing: border-box;"
									class="ipt" v-model="platColor" placeholder="请选择车牌颜色" suffixIcon="arrow-down"
									:disabled="true" suffixIconStyle="color: #909399" clearable></u-input>
								<view v-if="platColor == '白色'" class="fk1"></view>
								<view v-if="platColor == ''" class="fk1"></view>
								<view v-if="platColor == '其他'" class="fk1"></view>
								<view v-if="platColor == '黑色'" class="fk2"></view>
								<view v-if="platColor == '黄色'" class="fk3"></view>
								<view v-if="platColor == '农黄色'" class="fk3"></view>
								<view v-if="platColor == '蓝色'" class="fk4"></view>
								<view v-if="platColor == '绿色'" class="fk5"></view>
								<view v-if="platColor == '渐变绿'" class="fk5"></view>
								<view v-if="platColor == '黄绿色'" class="fk5"></view>
								<view v-if="platColor == '农绿色'" class="fk5"></view>
								<!-- <view v-if="platColor == '白色'" class="fk"></view>
							<view class="fk"></view>
							<view class="fk"></view>
							<view class="fk"></view>
							<view class="fk"></view> -->
							</view>

						</view>
						<view class="" style="margin-top: 20px;">
							<u-button @click="quer" shape="square" type="primary">
								<u-icon color="#ffffff" name="search"></u-icon>
								<!-- <image src="" mode=""></image> -->
								点击查询
							</u-button>
						</view>
					</view>


				</view>
				<view class="img_evma" style="margin-top: 10px;">
					<view class="boximga" @click="carDist">
						<image style="width: 290rpx;height: 145rpx;margin: auto;" src="/static/img/ljlc/car_cp.png"
							mode=""></image>
						<view style="color: #fff;text-align: center;margin-top: 15px">
							点击扫描车牌照
						</view>
					</view>

				</view>
				<!-- <u--image @click="carDist" src="/static/img/road02.png" width="312rpx" height="312rpx"></u--image>
				<view class="cont_tl">
					点击识别车牌号
				</view> -->
			</template>
		</view>
		<u-picker :show="plartColorShow" @cancel="colorCancel" @confirm="colorConfirm" :columns="colorPicker">
		</u-picker>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>
<script>
	import {
		pathToBase64
	} from '@/common/js_sdk/mmmm-image-tools/index.js'
	import {
		getBillInfo,
		getFirBillInfo,
		getScanLice,
		getEssential
	} from '@/common/api/monitor.js'
	import {
		maCode,
	} from '@/common/api/req.js'

	import Plate from './plate.vue'

	export default {
		components: {
			Plate
		},
		data() {
			return {
				tab_active: 0,

				carQuery: {
					vehicleNo: '',
				},
				platColor: '',
				plartColorShow: false,
				colorPicker: [],
				plateNumber: ['', '', '', '', '', '', '', ]

			}
		},

		mounted() {
			this.getMaCode()
		},
		methods: {
			quer() {
				// console.log(this.platColor, this.plateNumber, 888)
				let ys = this.platColor
				let cp = this.plateNumber.join('')
				this.carQuery.vehicleNo = cp
				// console.log(ys, cp, 888)
				this.goInfo()
			},
			plateChange(val) {
				this.plateNumber = val;
			},

			inputColorClick() {
				this.plartColorShow = true
			},
			colorCancel() {
				this.plartColorShow = false
			},
			colorConfirm(e) {
				this.platColor = e.value[0]
				console.log(e)
				this.plartColorShow = false
			},
			getMaCode() {
				maCode('veh_color').then(res => {
					let list = res.data.data
					let array = list.map(item => item.dictValue)
					this.colorPicker.push(array)
				})
			},
			//二维码查询
			getBillInfo(params) {
				getBillInfo(params).then(res => {
					console.log(res, '电子运单信息');
					if (!res.data.data.billNo) {
						uni.showLoading({
							title: '暂无数据'
						});

						setTimeout(function() {
							uni.hideLoading();
						}, 1500);
						return
					} else {

						// billNo: res.data.data.billNo

						getEssential(params).then(rst => {
							this.$store.commit('setroadCheckEssential', rst.data.data)
							console.log(rst, 7878)
						})

					}
					// this.infoData = res.data.data

					this.$store.commit('setroadCheckInfo', res.data.data)
					this.$goBack("./roadCheckInfo")
				})
			},
			//车牌号车牌颜色查询
			getFirBillInfo(params) {
				getFirBillInfo(params).then(res => {
					console.log(res, '电子运单信息');
					if(res.data.code == 200){
						let outTrafficVO = res.data.data.outTrafficVO
						var keys = Object.keys(outTrafficVO)
						let hasValue  = false
						for (var i = 0; i < keys.length; i++) {
						    if (outTrafficVO[keys[i]] !== null && outTrafficVO[keys[i]] !== undefined) {
						        hasValue = true;
						        break;
						    }
						}
						// console.log( hasValue,888)
						if (res.data.data.billNo == '') {
							this.$store.commit('setroadCheckInfo', res.data.data)
							console.log( hasValue,888)
							if (!hasValue) {
								this.$refs.uToast.show({
									type: 'default',
									message: "暂无数据",
								})
							} else {
								this.$goBack("./veharlog")
							}
						
						} else {
								console.log( res,8887)
							if (res.data.data.mark == 0) {
								getEssential({
									qrCode: res.data.data.qrCode
								}).then(rst => {
									this.$store.commit('setroadCheckEssential', rst.data.data)
						
								})
							}
						
							this.$store.commit('setroadCheckInfo', res.data.data)
							console.log(res, '电子运单信息');
							this.$goBack("./roadCheckInfo")
						}
					}else{
						this.$refs.uToast.show({
							type: 'default',
							message: "暂无数据",
						})
					}
					




				})
			},
			//tab切换
			tab_click(t) {
				this.tab_active = t ? 1 : 0
			},
			//车牌号查详情
			goInfo() {
				if (this.carQuery.vehicleNo == '') {
					this.$refs.uToast.show({
						type: 'default',
						message: "请输入车牌号码",
					})
					return
				}
				if (this.platColor == '') {
					this.$refs.uToast.show({
						type: 'default',
						message: "请选择车牌颜色",
					})
					return
				}
				// this.platColor
				this.getFirBillInfo({
					vehCode: this.carQuery.vehicleNo,
					vehColor:this.platColor
				})

			},
			//扫描二维码
			info_click() {
				uni.scanCode({
					scanType: ['qrCode'],
					success: (res) => {
						console.log(res);
						/**{
							"scanType": "UPC_E",//QR_CODE
							"path": "",
							"charSet": "utf8",
							"result": "07714403",
							"errMsg": "scanCode:ok"
						}*/
						if (res.scanType != 'QR_CODE') {
							uni.showToast({
								title: '请再试一次',
								icon: 'none'
							})
						} else {
							this.getBillInfo({
								qrCode: res.result
							})
						}
					}
				});
			},
			//车牌照识别
			carDist() {
				uni.chooseImage({
					count: 1, //选择图片数量，默认9
					sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
					success: (res) => {
						console.log(JSON.stringify(res.tempFilePaths));
						uni.getImageInfo({
							src: res.tempFilePaths[0],
							success: (path) => {
								//转base64
								pathToBase64(path.path).then(base64 => {
										console.log(base64); // 转为base64格式的图片
										this.getScanLice(base64)
									})
									.catch(error => {
										console.error(error)
									})
							}
						})

					}
				});
			},
			//车牌照识别接口
			getScanLice(url) {
				let params = {
					image: url
				}
				getScanLice(params).then(res => {
					console.log(res, '///////////');
					this.carQuery = res.data.data
					if (this.carQuery.vehicleNo) {
						this.plateNumber = this.carQuery.vehicleNo.split(/(?!$)/u)
					}


				}).catch((err) => {
					console.log(err, 'error');
				})
			},
		}
	}
</script>

<style lang='scss' scoped>
	.ipt {
		/* border-radius: 4px; */
		padding-left: 50px !important;
		background-color: #fff !important;
	}

	.text_label {
		width: 116rpx;
		height: 40rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 29rpx;
		color: #555555;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
		margin: 15px 5px;
	}

	.fk1 {
		width: 36rpx;
		height: 36rpx;
		background: #FFFFFF;
		border-radius: 7rpx;
		border: 2rpx solid #CCCCCC;
		position: absolute;
		top: 9px;
		left: 13px;

	}

	.fk2 {
		width: 36rpx;
		height: 36rpx;
		background: #21231e;
		border-radius: 7rpx;
		border: 2rpx solid #CCCCCC;
		position: absolute;
		top: 9px;
		left: 13px;

	}

	.fk3 {
		width: 36rpx;
		height: 36rpx;
		background: #EFD400;
		border-radius: 7rpx;
		border: 2rpx solid #CCCCCC;
		position: absolute;
		top: 9px;
		left: 13px;

	}

	.fk4 {
		width: 36rpx;
		height: 36rpx;
		background: #168EEC;
		border-radius: 7rpx;
		border: 2rpx solid #CCCCCC;
		position: absolute;
		top: 9px;
		left: 13px;

	}

	.fk5 {
		width: 36rpx;
		height: 36rpx;
		background: #1a9e34;
		border-radius: 7rpx;
		border: 2rpx solid #CCCCCC;
		position: absolute;
		top: 9px;
		left: 13px;

	}

	/* #1a9e34 */
	.img_evm {
		width: 692rpx;
		height: 540rpx;
		background: #F6F6F6;
		border-radius: 18rpx;
		padding: 47px 0;
		box-sizing: border-box;

		.boximg {
			width: 362rpx;
			height: 362rpx;
			background: linear-gradient(180deg, #168EEC 0%, #168EEC 49%, #168EEC 100%);
			border-radius: 7rpx;
			margin: auto;
			box-sizing: border-box;
			padding: 30px 15px;

		}
	}

	.img_evma {
		width: 692rpx;
		height: 540rpx;
		background: #F6F6F6;
		border-radius: 18rpx;
		padding: 47px 0;
		box-sizing: border-box;
		/* margin-top: 15px; */

		.boximga {
			width: 362rpx;
			height: 362rpx;
			background: linear-gradient(180deg, #168EEC 0%, #168EEC 49%, #168EEC 100%);
			border-radius: 7rpx;
			margin: auto;
			box-sizing: border-box;
			padding: 30px 18px;

		}
	}

	.roadCheck {
		/* padding: 0 10rpx; */
		position: relative;
	}

	.topTab {
		width: 100%;
		height: 90rpx;
		/* background: pink; */
		display: flex;
		border-bottom: 2rpx solid #DDDDDD;

		.tab_item {
			font-size: 28rpx;
			width: 50%;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			position: relative;
		}

		.tab_item_active::after {
			position: absolute;
			content: '';
			width: 264rpx;
			height: 4rpx;
			background: #1590EF;
			bottom: 0;
			left: 50rpx;
		}
	}

	.search {
		width: calc(100% - 48rpx);
		height: 50rpx;
		padding: 24rpx;
	}

	.road_cont {
		width: 100%;
		height: 500rpx;
		position: absolute;
		/* top: calc(50vh - 250rpx);
		 */
		top: 64px;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;

		.cont_tl {
			width: 100%;
			text-align: center;
			color: #1590EF;
			font-size: 40rpx;
			/* height: 150rpx;
			line-height: 150rpx; */
		}
	}

	.road_cont1 {
		width: 100%;
		height: 500rpx;
		position: absolute;
		/* top: calc(50vh - 250rpx); */

		/* top: 64px; */
		display: flex;
		flex-wrap: wrap;
		justify-content: center;

		.cont_tl {
			width: 100%;
			text-align: center;
			color: #1590EF;
			font-size: 40rpx;
			/* height: 150rpx;
			line-height: 150rpx; */
		}
	}

	.text_labelz {
		width: 174rpx;
		height: 40rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 29rpx;
		color: #555555;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
		margin-bottom: 15px;
	}
</style>
